<template>
    <div class="bnk">
        <h2 class="text-white" style="text-align: center;font-weight: bold;">贵州省固废系统"医疗机构"数据请求测试</h2>
        <br/>
        <a-row  >
            <a-col :sm="24" :md="14" style="margin-right: 10px;" >
                <a-card title="用户登录测试" >
                    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleLogin">
                        <a-form-item label="登录账户">
                            <a-input v-decorator="['loginName', { rules: [{ required: true, message: '请输入账户名称!' }] }]"/>
                        </a-form-item>
                        <a-form-item label="登录密码">
                            <a-input v-decorator="['password', { rules: [{ required: true, message: '请输入登录密码!' }] }]"/>
                        </a-form-item>
                        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                            <a-button type="primary" html-type="submit">
                                立即登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                </a-card>
                <br/>
                <a-card title="添加机构等级" >
                    <a-form :form="form1" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleAddRankInfo">
                        <a-form-item label="等级名称">
                            <a-input v-decorator="['rank', { rules: [{ required: true, message: '机构等级!' }] }]"/>
                        </a-form-item>
                        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                            <a-button type="primary" html-type="submit">
                                立即添加
                            </a-button>
                        </a-form-item>
                    </a-form>
                </a-card>
                <br/>
                <a-card title="添加楼宇">
                    <a-form :form="form2" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleAddConstruct">
                        <a-form-item label="楼宇名称">
                            <a-input v-decorator="['typeName', { rules: [{ required: true, message: '不能为空!' }] }]"/>
                        </a-form-item>
                        <a-form-item label="状态">
                            <a-input v-decorator="['status', { rules: [{ required: true, message: '不能为空!' }] }]"/>
                        </a-form-item>
                        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                            <a-button type="primary" html-type="submit">
                                立即添加
                            </a-button>
                        </a-form-item>
                    </a-form>
                </a-card>
                <br/>
                <a-card title="添加部门/科室" >
                    <a-form :form="form3" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleAddDepartmentInfo">
                        <a-form-item label="楼宇ID">
                            <a-input v-decorator="['departmentTypeId', { rules: [{ required: true, message: '不能为空!' }] }]"/>
                        </a-form-item>
                        <a-form-item label="部门/科室名称">
                            <a-input v-decorator="['departmentName', { rules: [{ required: true, message: '不能为空!' }] }]"/>
                        </a-form-item>
                        <a-form-item label="状态">
                            <a-input v-decorator="['status', { rules: [{ required: true, message: '不能为空!' }] }]"/>
                        </a-form-item>
                        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                            <a-button type="primary" html-type="submit">
                                立即添加
                            </a-button>
                        </a-form-item>
                    </a-form>
                </a-card>

            </a-col>

            <a-col :sm="24" :md="9">
                <a-card title="部门信息">
                    <a-button type="primary" style="margin-bottom: 20px;" @click="getDepartmentList" >
                        查询楼宇/部门科室信息
                    </a-button>

                    <a-list size="small" bordered :data-source="departmentList">
                        <a-list-item slot="renderItem" slot-scope="item, index">
                            {{ item.typeName }} - {{ item.id }}
                            <div style="margin-left: 20px;margin-top: 10px;" v-if="item.departmentDTOS" >
                                <a-list size="small" :bordered="false" :data-source="item.departmentDTOS">
                                    <a-list-item slot="renderItem" slot-scope="val, index">
                                        {{ val.departmentName }} - {{ val.id }}
                                    </a-list-item>
                                </a-list>
                            </div>
                        </a-list-item>
                    </a-list>
                </a-card>
                <br/>
                <a-card title="登陆结果">
                    <div class="text-white">机构编码 ： {{customerNumber || '--'}}</div>
                    <div class="text-white" style="word-break: break-word;" >{{loginText}}</div>
                </a-card>
                <br/>
                <a-card title="操作结果" >
                    <div class="text-white" style="word-break: break-word;" >{{text}}</div>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import { getAction, postAction } from '../../api/manage'

    export default {
        name: 'BNK',
        data() {
            return {
                formLayout: 'horizontal',
                form: this.$form.createForm(this, { name: 'coordinated' }),
                form1: this.$form.createForm(this, { name: 'coordinated' }),
                form2: this.$form.createForm(this, { name: 'coordinated' }),
                form3: this.$form.createForm(this, { name: 'coordinated' }),

                customerNumber : null,

                departmentList : [],
                activeKey: [],

                loginText: '',
                text: '',

                url: {
                    // login: '/hc/test/loginHospital',
                    login: '/hc/test/login',
                    addRankInfo: '/hc/test/addRankInfo',
                    addConstruct: '/hc/test/addConstruct',
                    addDepartmentInfo: '/hc/test/addDepartmentInfo',
                    getDepartmentList: '/hc/test/getDepartmentList',
                }
            }
        },
        mounted() {
            this.form.setFieldsValue({
                loginName: '13985629669',
                password: '13985629669',
            })
            this.form1.setFieldsValue({
                rank: '一级医疗机构'
            })
            this.form2.setFieldsValue({
                status: 1
            })
            this.form3.setFieldsValue({
                status: 1
            })
        },
        methods: {
            getDepartmentList : async function(){
                let params = {
                    hospitalInfo : this.customerNumber
                };
                let res = await getAction(this.url.getDepartmentList,params);
                this.departmentList = res || [];
                this.departmentList.forEach((item,index) => {
                    this.activeKey.push(`${index}`);
                })
                this.text = JSON.stringify(res)
            },
            // 用户登录
            handleLogin(e) {
                e.preventDefault()
                let _this = this
                this.form.validateFields(async (err, values) => {
                    if (!err) {
                        let params = {
                            loginName : values.loginName,
                            password : values.password,
                            hospitalInfo : _this.customerNumber
                        };
                        let res = await getAction(_this.url.login, params);
                        if(res && res.success){
                            let info = res.data;
                            if(info){
                                _this.customerNumber = info.hospitalInfo;
                            }
                        }
                        _this.loginText = JSON.stringify(res);
                    }
                })
            },
            // 添加机构等级
            handleAddRankInfo(e) {
                e.preventDefault()
                let _this = this
                this.form1.validateFields(async (err, values) => {
                    if (!err) {
                        let params = {
                            rank : values.rank,
                            hospitalInfo : _this.customerNumber
                        };
                        let res = await postAction(_this.url.addRankInfo, params)
                        _this.text = JSON.stringify(res)
                    }
                })
            },
            // 添加楼宇
            handleAddConstruct(e) {
                e.preventDefault()
                let _this = this;
                this.form2.validateFields(async (err, values) => {
                    if (!err) {
                        values['hospitalInfo'] = _this.customerNumber;
                        let res = await postAction(_this.url.addConstruct, values);
                        _this.text = JSON.stringify(res);
                        _this.form3.setFieldsValue({
                            departmentTypeId: res || ''
                        })
                    }
                })
            },
            // 添加部门
            handleAddDepartmentInfo(e) {
                e.preventDefault()
                let _this = this
                this.form3.validateFields(async (err, values) => {
                    if (!err) {
                        values['hospitalInfo'] = _this.customerNumber;
                        let res = await postAction(_this.url.addDepartmentInfo, values)
                        _this.text = JSON.stringify(res);
                        await _this.getDepartmentList();
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .bnk {
        padding: 20px;
    }
</style>
